<script setup>
import {onMounted, reactive, ref} from "vue";
import {pageList} from "./api/EntityApi.js";
import {PaginationDTO} from "../../model/PaginationDTO.js";
import {useRoute} from "vue-router";
import {tableCriteria} from './model/EntityConfig.js';

const paginationDTO = new PaginationDTO({});
const route = useRoute();
let tableData = ref([]);
// 查询参数
let pageNum = ref(1);
let pageSize = ref(100);
let totalNum = ref(0);
let criteria = reactive({});
paginationDTO.condition = criteria;
criteria['apiName'] = route.query.apiName;
criteria['appName'] = route.query.appName;

// 修改数据
let form = reactive({});

// 定期轮询获取最新日志
const pollLogs = () => {
  setInterval(search, 1000); // 每 1 秒轮询一次
};

// 查询数据
const search = () => {
  if (pageSize > 1000) {
    pageSize.value = 1000;
  }
  paginationDTO.pageSize = pageSize.value;
  paginationDTO.pageNum = pageNum.value;
  pageList(paginationDTO).then((data) => {
    if (data) {
      tableData.value = data.data;
      pageSize.value = data.pageSize;
      pageNum.value = data.pageNum;
      totalNum.value = data.total;
    }
  });
};

const clear = () => {
  tableCriteria.forEach(item => {
    criteria[item.key] = null;
  });
};

onMounted(() => {
  search(); // 初始化时获取一次日志
  pollLogs(); // 启动轮询
});
</script>

<template>
  <div>
    <h4>{{ route.query.apiName }} 操作日志</h4>
    <div v-for="(log, index) in tableData" :key="index" class="log-card">
      <span>{{ log.logTime }} {{ log.businessId }} {{ log.appName }} --> {{ log.apiName }} {{ log.logData }}</span>
    </div>
  </div>
</template>

<style scoped>
.log-card {
  margin-bottom: 10px; /* 添加底部间距 */
  padding: 10px; /* 添加内边距 */
  text-align: left; /* 文字内容靠左 */
}
</style>
